<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>从头开始</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    <div id="app2" v-bind:title="message">
      <span v-if="seen">鼠标悬停试试</span>
      <ol>
        <li v-for="todo of todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    <div id="app3">
      <p>{{ message }}</p>
      <input type="text" v-model="message" />
    </div>

    <div id="app4">
      <ol>
        <todo-item
          v-for="item of grocerylist"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>

    <script>
      /**
       * 声明式渲染
       */
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!"
        },
        methods: {
          reverseMessage: function() {
            this.message = this.message
              .split("")
              .reverse()
              .join("");
          }
        }
      });
      var app2 = new Vue({
        el: "#app2",
        data: {
          seen: true,
          message: "页面加载于 " + new Date().toLocaleDateString(),
          todos: [
            {
              text: "学习 JavaScript"
            },
            {
              text: "学习 Vue"
            },
            {
              text: "整个牛逼的项目试试"
            }
          ]
        }
      });
      var app3 = new Vue({
        el: "#app3",
        data: {
          message: "Hello Model!"
        }
      });
      // 组件化应用构建
      Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{ todo.text }}</li>"
      });
      var app4 = new Vue({
        el: "#app4",
        data: {
          grocerylist: [
            {
              id: 0,
              text: "蔬菜"
            },
            {
              id: 1,
              text: "奶酪"
            },
            {
              id: 2,
              text: "随便其他什么人吃的东西"
            }
          ]
        }
      });
    </script>
  </body>
</html>
